/* 最简单的three例子
1.引入threejs
2.创建场景
3.创建相机
4.初始化渲染器
5.webgl渲染的canvas添加到body中、
6.使用渲染器，通过相机将场景渲染进来
*/

/*
PerspectiveCamera 透视投影相机（模拟人眼观察）
  PerspectiveCamera( fov, aspect, near, far )
  （相机视锥体竖直方向视野角度，相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height，
  相机视锥体近裁截面相对相机距离，相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向）
BoxGeometry 长方体
MeshBasicMaterial 网络基础材质
Mesh 网络模型

WebGLRenderer渲染器
renderer.setSize(w,h)设置three的渲染区域尺寸
renderer.render(scene, camera)执行渲染操作，相当于拍照的咔
renderer.domElement获取render()后的画布
*/

import *  as THREE from 'three'

//1.创建场景
const scene = new THREE.Scene()

//2.创建相机 (透视相机)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

//设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

//添加物体
//创建几何体

const cubeGeometry = new THREE.BoxGeometry(1,1,1);
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00});
//根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
scene.add(cube);

//初始化渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);

//将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)

//使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);